<template>
  <div>
    <div class="table-toolbar" v-if="hasToolbar">
      <div class="table-toolbar-left">
        <slot name="toolbarBtn"></slot>
      </div>
      <div class="table-toolbar-right flex-center">
        <template v-if="multipleSelection.length > 0">
          <el-tooltip effect="dark" content="删除选中" placement="top">
            <el-icon
              class="columns-setting-icon"
              @click="delSelection(multipleSelection)"
            >
              <Delete />
            </el-icon>
          </el-tooltip>
          <el-divider direction="vertical" />
        </template>
        <!-- <el-tooltip effect="dark" content="刷新" placement="top">
          <el-icon class="columns-setting-icon" @click="refresh">
            <Refresh />
          </el-icon>
        </el-tooltip> -->
        <!-- <el-divider direction="vertical" />
        <el-tooltip effect="dark" content="列设置" placement="top">
          <el-dropdown :hide-on-click="false" size="small" trigger="click">
            <el-icon class="columns-setting-icon">
              <Setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="c in columns">
                  <el-checkbox v-model="c.visible" :label="c.label" />
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-tooltip> -->
      </div>
    </div>
    <el-table
      class="mgb20"
      :style="{ width: '100%' }"
      border
      :data="tableData"
      highlight-current-row
      :row-key="rowKey"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChangeTable"
      @cell-click="handleCellClick"
      @cell-mouse-enter="handleCellMouseEnter"
      @cell-mouse-leave="handleCellMouseLeave"
      table-layout="auto"
      :span-method="handleSpanMethod"
    >
      <template v-for="item in columns" :key="item.prop">
        <el-table-column
          v-if="item.visible"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :type="item.type"
          :align="item.align || 'center'"
          :fixed="item.fixed || false"
        >
          <template
            #default="{ row, column, $index }"
            v-if="item.type === 'index'"
          >
            {{ getIndex($index) }}
          </template>
          <template #default="{ row, column, $index }" v-if="!item.type">
            <slot :name="item.prop" :rows="row" :index="$index">
              <template v-if="item.prop == 'operator'">
                <el-button
                  type="warning"
                  size="small"
                  :icon="View"
                  v-if="row.pageName !== 'songRecommendList'"
                  @click="viewFunc(row)"
                >
                  详情
                </el-button>
                <el-button
                  :disabled="row.canModified === 0"
                  type="primary"
                  size="small"
                  :icon="Edit"
                  v-if="row.pageName !== 'songRecommendList'"
                  @click="editFunc(row)"
                >
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  :icon="Delete"
                  v-if="row.pageName !== 'songRecommendList'"
                  :disabled="!row.isOffline && row.playlistId"
                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
                <el-button
                  type="primary"
                  plain
                  size="small"
                  icon="Upload"
                  v-if="row.isOffline === 1 && !row.songTrackFileId"
                  @click="handleUp(row)"
                >
                  上架
                </el-button>

                <el-button
                  type="danger"
                  plain
                  size="small"
                  icon="Download"
                  v-if="
                    row.isOffline === 0 &&
                    !row.songTrackFileId &&
                    row.pageName !== 'songRecommendList'
                  "
                  @click="handleDownload(row)"
                >
                  下架
                </el-button>
                <el-button
                  type="primary"
                  plain
                  size="small"
                  icon="Download"
                  v-if="
                    row.songId &&
                    !row.songTrackFileId &&
                    row.pageName !== 'songRecommendList'
                  "
                  @click="handleDownloadSong(row)"
                >
                  下载歌曲
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  v-if="
                    row.songId &&
                    !row.songTrackFileId &&
                    row.pageName !== 'songRecommendList'
                  "
                  @click="handleTrackFileList1(row, 1)"
                >
                  子版本列表
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  v-if="
                    row.songId &&
                    !row.songTrackFileId &&
                    row.pageName !== 'songRecommendList'
                  "
                  @click="handleTrackFileList2(row, 2)"
                >
                  分轨列表
                </el-button>
                <el-button
                  type="warning"
                  size="small"
                  v-if="
                    row.songId &&
                    !row.songTrackFileId &&
                    row.pageName !== 'songRecommendList'
                  "
                  @click="handleCollectSong(row)"
                >
                  收藏到歌单
                </el-button>
                <!-- 设为上新推荐 -->
                <el-button
                  type="primary"
                  plain
                  size="small"
                  v-if="
                    row.songId &&
                    !row.songTrackFileId &&
                    row.isRecommended === 0 &&
                    row.pageName !== 'songRecommendList'
                  "
                  @click="handleSetRecommended(row)"
                >
                  设为上新推荐
                </el-button>
                <!-- 上新推荐-移除推荐 -->
                <el-button
                  type="danger"
                  size="small"
                  v-if="
                    row.songId &&
                    !row.songTrackFileId &&
                    row.isRecommended === 1
                  "
                  :disabled="!row.isOffline && row.playlistId"
                  @click="handleYichuRecommended(row)"
                >
                  移除上新推荐
                </el-button>
                <!-- 版权方管理--查看曲库列表 -->
                <el-button
                  type="primary"
                  size="small"
                  v-if="row.pageName === 'copyright'"
                  @click="handleviewSongList(row)"
                >
                  查看歌曲列表
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  plain
                  v-if="row.userId && row.userType === 1"
                  @click="handleModifyPwd(row)"
                >
                  修改密码
                </el-button>
              </template>
              <template v-if="item.prop == 'operator2'">
                <el-button
                  type="primary"
                  size="small"
                  plain
                  v-if="row.userId && row.userType === 2"
                  @click="handleModifyOrderDuration(row)"
                >
                  修改订阅有效期
                </el-button>
              </template>
              <span v-else-if="item.formatter">
                {{ item.formatter(row[item.prop]) }}
              </span>
              <span v-else>
                {{ row[item.prop] }}
              </span>
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="hasPagination"
      :current-page="currentPage"
      :page-size="pageSize"
      :background="true"
      :layout="layout"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { toRefs, PropType, ref } from "vue";
import { Delete, Edit, View, Refresh } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  // 表格相关
  tableData: {
    type: Array,
    default: [],
  },
  columns: {
    type: Array as PropType<any[]>,
    default: [],
  },
  rowKey: {
    type: String,
    default: "id",
  },
  hasToolbar: {
    type: Boolean,
    default: true,
  },
  //  分页相关
  hasPagination: {
    type: Boolean,
    default: true,
  },
  total: {
    type: Number,
    default: 0,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },

  layout: {
    type: String,
    default: "total, prev, pager, next",
  },
  delFunc: {
    type: Function,
    default: () => {},
  },

  //上架歌单(歌曲)
  upFunc: {
    type: Function,
    default: () => {},
  },
  //下架歌单(歌曲)
  downFunc: {
    type: Function,
    default: () => {},
  },
  //下载歌曲
  downFuncSong: {
    type: Function,
    default: () => {},
  },
  //新增子版本或者分轨文件
  trackFilekList: {
    type: Function,
    default: () => {},
  },
  // 设为上新推荐--歌曲
  setRecommendedFunc: {
    type: Function,
    default: () => {},
  },
  // 上新推荐-移除推荐
  yichRecommendedFunc: {
    type: Function,
    default: () => {},
  },
  // 版权方管理--查看曲库列表
  viewSongListFunc: {
    type: Function,
    default: () => {},
  },
  //收藏到歌单
  collectSongFunc: {
    type: Function,
    default: () => {},
  },
  viewFunc: {
    type: Function,
    default: () => {},
  },
  editFunc: {
    type: Function,
    default: () => {},
  },
  delSelection: {
    type: Function,
    default: () => {},
  },
  refresh: {
    type: Function,
    default: () => {},
  },
  changePage: {
    type: Function,
    default: () => {},
  },
  changeCell: {
    type: Function,
    default: () => {},
  },
  changeCellMouseEnter: {
    type: Function,
    default: () => {},
  },
  changeCellMouseLeave: {
    type: Function,
    default: () => {},
  },
  selectionChange: {
    type: Function,
    default: () => {},
  },
  selectRadioTable: {
    type: Function,
    default: () => {},
  },
  modifyPwdFunc: {
    type: Function,
    default: () => {},
  },
  modifyOrderDurationFunc: {
    type: Function,
    default: () => {},
  },
});

let {
  tableData,
  columns,
  rowKey,
  hasToolbar,
  hasPagination,
  total,
  currentPage,
  pageSize,
  layout,
} = toRefs(props);

columns.value.forEach((item) => {
  if (item.visible === undefined) {
    item.visible = true;
  }
});

// 当选择项发生变化时会触发该事件
const multipleSelection = ref([]);
const handleSelectionChange = (selection: any[]) => {
  multipleSelection.value = [];
  selection = [];
  console.log("选择项发生变化");
  multipleSelection.value = selection;
  console.log(multipleSelection.value);
  props.selectionChange(selection);
};

// 单选每一行数据
const currentRow = ref();
const handleCurrentChangeTable = (selection: any[]) => {
  currentRow.value = selection;
  console.log("nihao");
  console.log(currentRow.value);
  props.selectRadioTable(selection);
};

// 当某个单元格被点击时会触发该事件
const handleCellClick = (val, column, rowIndex, columnIndex) => {
  props.changeCell(val, column, rowIndex, columnIndex);
};
// 当某个移入某个单元格会触发该事件
const handleCellMouseEnter = (val, column, rowIndex, columnIndex) => {
  props.changeCellMouseEnter(val, column, rowIndex, columnIndex);
};
// 当某个移除某个单元格会触发该事件
const handleCellMouseLeave = (val, column, rowIndex, columnIndex) => {
  props.changeCellMouseLeave(val, column, rowIndex, columnIndex);
};

// 当前页码变化的事件
const handleCurrentChange = (val: number) => {
  props.changePage(val);
};

const handleDelete = (row) => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      props.delFunc(row);
    })
    .catch(() => {});
};

// 上架---歌单管理
const handleUp = (row) => {
  ElMessageBox.confirm("确定要上架吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      props.upFunc(row);
    })
    .catch(() => {});
};

// 下架---歌单管理
const handleDownload = (row) => {
  ElMessageBox.confirm("确定要下架吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      props.downFunc(row);
    })
    .catch(() => {});
};

// 下载歌曲---歌单管理
const handleDownloadSong = (row) => {
  props.downFuncSong(row);
};

// 新增---子版本或者分轨文件；类型 1-子版本 2-分轨文件
const handleTrackFileList1 = (row, type) => {
  props.trackFilekList(row, 1);
};
// 新增---子版本或者分轨文件；类型 1-子版本 2-分轨文件
const handleTrackFileList2 = (row, type) => {
  props.trackFilekList(row, 2);
};

// 收藏到歌单
const handleCollectSong = (row) => {
  props.collectSongFunc(row);
};

// 设为上新推荐
const handleSetRecommended = (row) => {
  ElMessageBox.confirm("确定要设为上新推荐吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      props.setRecommendedFunc(row);
    })
    .catch(() => {});
};

// 上新推荐列表--移
const handleYichuRecommended = (row) => {
  ElMessageBox.confirm("确定要移除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      props.yichRecommendedFunc(row);
    })
    .catch(() => {});
};

// 版权方管理--查看曲库列表
const handleviewSongList = (row) => {
  props.viewSongListFunc(row);
};

// 修改密码--账号管理
const handleModifyPwd = (row) => {
  props.modifyPwdFunc(row);
};

// 修改订阅有效期
const handleModifyOrderDuration = (row) => {
  props.modifyOrderDurationFunc(row);
};

const getIndex = (index: number) => {
  return index + 1 + (currentPage.value - 1) * pageSize.value;
};

const handleSpanMethod = (row, column, rowIndex, columnIndex) => {
  if (columnIndex === 0) {
    //判断是否为第一列数据
    if (rowIndex % 2 === 0) {
      //判断开始合并的行号
      return {
        rowspan: 2,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
</script>

<style scoped>
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.columns-setting-icon {
  display: block;
  font-size: 18px;
  cursor: pointer;
  color: #676767;
}
</style>
<style>
.table-header .cell {
  color: #333;
}
.el-input {
  /* width: auto; */
  min-width: 200px;
}
.el-button--small {
  /* margin: 5px 0; */
}
</style>
